<?php

/* @var $this \yii\web\View */
/* @var $content string */

use yii\helpers\Html;
use \yii\helpers\Url;

use app\assets\AppAdminAsset;
AppAdminAsset::register($this);
$this->title = '主页';
?>
<?php $this->beginPage() ?>
<!DOCTYPE html>
<html>
<head>
    <?php $this->head() ?>
    <?= Html::csrfMetaTags() ?>
    <style type="text/css">
        .pln{color:#000}@media screen{.str{color:#080}.kwd{color:#008}.com{color:#800}.typ{color:#606}.lit{color:#066}.pun,.opn,.clo{color:#660}.tag{color:#008}.atn{color:#606}.atv{color:#080}.dec,.var{color:#606}.fun{color:red}}@media print,projection{.str{color:#060}.kwd{color:#006;font-weight:bold}.com{color:#600;font-style:italic}.typ{color:#404;font-weight:bold}.lit{color:#044}.pun,.opn,.clo{color:#440}.tag{color:#006;font-weight:bold}.atn{color:#404}.atv{color:#060}}pre.prettyprint{padding:2px;border:1px solid #888}ol.linenums{margin-top:0;margin-bottom:0}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}li.L1,li.L3,li.L5,li.L7,li.L9{background:#eee}
        pre.prettyprint{
            border-color:#D1D7DC;
        }
        ol.linenums{
            margin-left: 40px;
        }
        ol.linenums li{
            list-style-type:decimal;
            background:#fff;
            color:#2B91AF;
            border-left:1px solid #D1D7DC;
            margin-left:2px;
            padding-left:10px;
        }
        ol.linenums li::after{
            content: '';
        }
        .tree-title {
            font-size: 14px;
        }

        .tree-title a {
            text-decoration: none;
        }

        .top_links {
            background: #fff;
            color: #000;
            overflow: hidden;
            height: 60px;
            text-align: center
        }

        .top_links a {
            color: #999;
            display: inline;
            margin: 0;
            padding: 0;
            text-decoration: none;
        }

        .top_links a:hover {
            color: #E26B1D;
        }

        #head-menu {
            position: absolute;
            z-index: 8;
            display: none;
            background: #2d3e50;
            color: #fff;
            left: 0;
            padding: 0 4.5%;
            top: 66px;
        }

        #head-menu .navbar {
            margin: 0 40px 20px 40px;
        }

        #head-menu a {
            color: #fff;
        }

    </style>

</head>
<body class="easyui-layout" style="text-align:left">
<?php $this->beginBody() ?>
<div id="head-menu">
    <div class="navbar navbar-right">
        <ul>
            <li><a href="/index.php">Home</a></li>
            <li><a href="/demo/main/index.php">Demo</a></li>
            <li><a href="/tutorial/index.php">Tutorial</a></li>
            <li><a href="/documentation/index.php">Documentation</a></li>
            <li><a href="/download/index.php">Download</a></li>
            <li><a href="/extension/index.php">Extension</a></li>
            <li><a href="/contact.php">Contact</a></li>
            <li><a href="/forum/index.php">Forum</a></li>
        </ul>
    </div>
</div>
<div id="mm1" style="width:100px;" data-options="disabled:true">
    <ul>
        <li>Help</li>
        <li>Help</li>
        <li>Update</li>
        <li>Update</li>
        <li>About</li>
    </ul>
   <!-- <div>Help</div>
    <div>Update</div>
    <div>About</div>-->
</div>
<div region="north" border="false" class="group wrap header" style="height:80px;font-size:100%;overflow:hidden">
    <div class="content"  style="align-content: center">
        <div class="navigation-toggle" data-tools="navigation-toggle" data-target="#navbar-1" >
            <span>EasyUI</span>
        </div>
        <div>
        <div style="width: 90%;float: left">
            <span>EasyUI</span>
        </div>
        <div style="width: 10%;float: right;margin:auto;display:table-cell;   vertical-align:middle; ">
           <a href="#" class="easyui-menubutton"  style="margin: 0 auto;  "  data-options="menu:'#mm1'">hello world</a>
        </div>
        </div>
        <div style="clear:both"></div>
    </div>
</div>
<div region="west" split="true" title="Plugins" style="width:20%;min-width:180px;padding:5px;">
    <ul class="easyui-tree">
        <li iconCls="icon-base"><span>Base</span>
            <ul>
                <li iconCls="icon-gears"><a href="javascript:void (0);" onclick="open1('title1','<?=Url::toRoute('article/index') ?>')">title1</a></li>
                <li iconCls="icon-gears"><a href="javascript:void (0);" onclick="open1('title2','<?=Url::toRoute('article/index') ?>')">title2</a></li>
                <li iconCls="icon-gears"><a href="javascript:void (0);" onclick="open1('title3','<?=Url::toRoute('article/index') ?>')">title3</a></li>
                <li iconCls="icon-gears"><a href="javascript:void (0);" onclick="open1('title4','<?=Url::toRoute('article/index') ?>')">title4</a></li>

            </ul>
        </li>
    </ul>
</div>
<div region="center">
    <div id="tt" class="easyui-tabs" fit="true" border="false" plain="true">
        <div title="welcome" href="<?=  Url::toRoute('home/start') ?>" class="content-doc"></div>
    </div>
</div>
<?php $this->endBody() ?>
<script type="text/javascript">
    $(function () {
        $('#tt').tabs({
            onLoad: function (panel) {
                var plugin = panel.panel('options').title;
                panel.find('textarea[name="code-' + plugin + '"]').each(function () {
                    var data = $(this).val();
                    data = data.replace(/(\r\n|\r|\n)/g, '\n');
                    if (data.indexOf('\t') == 0) {
                        data = data.replace(/^\t/, '');
                        data = data.replace(/\n\t/g, '\n');
                    }
                    data = data.replace(/\t/g, '    ');
                    var pre = $('<pre name="code" class="prettyprint linenums"></pre>').insertAfter(this);
                    pre.text(data);
                    $(this).remove();
                });
                prettyPrint();
            }
        });
        var sw = $(window).width();
        if (sw < 767) {
            $('body').layout('collapse', 'west');
        }
        $('.navigation-toggle span').bind('click', function () {
            $('#head-menu').toggle();
        });
    });
    function open1(title,url) {
        if ($('#tt').tabs('exists', title)) {
            $('#tt').tabs('select', title);
        } else {
            var content="";
            if (url){
                content = '<iframe scrolling="no" frameborder="0"  src="'+url+'" style="width:100%;height:100%;"></iframe>';
            } else {
                content = '未实现';
            }
            $('#tt').tabs('add', {
                title: title,
                closable: true,
                bodyCls: 'content-doc',
                content:content
               /* extractor: function (data) {
                    data = $.fn.panel.defaults.extractor(data);
                    var tmp = $('<div></div>').html(data);
                    data = tmp.find('#content').html();
                    tmp.remove();
                    return data;
                }*/
            });
        }
    }
</script>
<script type="text/javascript">
    function setNav() {
        var demosubmenu = $('#demo-submenu');
        if (demosubmenu.length) {
            if ($(window).width() < 450) {
                demosubmenu.find('a:last').hide();
            } else {
                demosubmenu.find('a:last').show();
            }
        }
        if ($(window).width() < 767) {
            $('.navigation-toggle').each(function () {
                $(this).show();
                var target = $(this).attr('data-target');
                $(target).hide();
                setDemoNav();
            });
        } else {
            $('.navigation-toggle').each(function () {
                $(this).hide();
                var target = $(this).attr('data-target');
                $(target).show();
            });
        }
    }
    function setDemoNav() {
        $('.navigation-toggle').each(function () {
            var target = $(this).attr('data-target');
            if (target == '#navbar-demo') {
                if ($(target).is(':visible')) {
                    $(this).css('margin-bottom', 0);
                } else {
                    $(this).css('margin-bottom', '2.3em');
                }
            }
        });
    }
    $(function () {
        setNav();
        $(window).bind('resize', function () {
            setNav();
        });
        $('.navigation-toggle').bind('click', function () {
            var target = $(this).attr('data-target');
            $(target).toggle();
            setDemoNav();
        });
    })
</script>
</body>
</html>
<?php $this->endPage() ?>